<ion-header>
  <ion-toolbar>
    <div class="signin_title">
      <div class="brand"><img src="assets/images/android/drawable-mdpi/logo.png" alt=""></div>
      <div class="sign_btn" (click)="signIn()">{{'auth.signFirst.signIn' | translate}}</div>
    </div>
  </ion-toolbar>
</ion-header>
<div class="login_content">
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="checkUserId()">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-label class="login_title">
          {{'auth.signFirst.welcome_sign_up' | translate}}
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-header class="header_word">
          {{'auth.signFirst.please_enter_user_id' | translate}}
        </ion-header>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-grid>
          <ion-row class="input-border-bottom">
            <ion-col size="12">
              <ion-input type="text" clearInput="true" maxlength=20 
                        placeholder="{{'auth.signFirst.user_id' | translate}}" 
                        required 
                        clearInput="true" 
                        formControlName="appUserId"></ion-input>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="12" *ngIf="appUserId.invalid && (appUserId.dirty || appUserId.touched)">
              <div *ngIf="appUserId.errors.required" class="form-error-item">
                {{'auth.signFirst.user_id_required' | translate}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button class="customer-btn" fill="clear" type="submit" expand="block" [disabled]='validateForm.invalid || loading'>
          {{'auth.signFirst.next' | translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</div>